// 主容器布局
.div-container {
	display: flex;
	height: 100%;
	box-sizing: border-box;

	// 左侧面板
	.left {
		width: 320px;
		height: 100%;
		border-right: 1px solid var(--theme-content-border);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: var(--theme-card-bg);
		box-shadow: var(--theme-card-shadow);
		position: relative;
		z-index: 1;

		// 中间内容区域
		&-middle {
			padding: 12px;
			height: calc(100vh - 230px);
			overflow-y: auto;
			.section-header {
				font-weight: 400;
				margin-bottom: 4px;
				color: var(--theme-content-text);
			}

			.section-row {
				display: grid;
				gap: 0 10px;
				width: 100%;
				box-sizing: border-box;

				.section-col {
					display: flex;
					flex-direction: column;

					.section-title {
						font-size: 12px;
						color: var(--theme-content-text-muted);
						margin-bottom: 4px;
					}
				}
			}

			// 分隔线
			hr {
				background-color: var(--theme-content-border);
				height: 1px;
				border: none;
				margin: 0 0 12px 0;
			}
		}

		// 底部区域
		&-bottom {
			height: 60px;
			border-top: 1px solid var(--theme-content-border);
			display: flex;
			align-items: center;
			padding: 0 12px;
			gap: 12px;

			.el-button {
				flex: 1;
			}
		}
	}

	// 右侧面板
	.right {
		flex: 1;
		background: var(--theme-content-bg);
	}
}

// 网格布局工具类
.tow-squares {
	grid-template-columns: repeat(2, 1fr);
}

.three-squares {
	grid-template-columns: repeat(3, 1fr);
}

// 元素选择器布局
.element-select-section-row {
	grid-template-columns: 1fr 1fr;
}

// 三元计算特殊布局
.ternary-composition-row {
	grid-template-columns: repeat(3, 1fr);
}

.ternary-range-row {
	grid-template-columns: repeat(2, 1fr);
}

// Conductivity风格的输入区域卡片
.input-section {
	background: var(--theme-card-bg);
	border: 1px solid var(--theme-card-border);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: var(--theme-card-shadow);
	backdrop-filter: var(--backdrop-blur);
	transition: all 0.3s ease;

	&:hover {
		transform: translateY(-2px);
		box-shadow: var(--theme-card-shadow-hover);
	}

	.section-header {
		font-size: 14px;
		font-weight: 600;
		color: var(--theme-content-text);
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.section-row {
		display: grid;
		gap: 12px;
		width: 100%;
		box-sizing: border-box;

		.section-col {
			display: flex;
			flex-direction: column;

			.section-title {
				font-size: 12px;
				color: var(--theme-content-text-muted);
				margin-bottom: 6px;
				font-weight: 500;
			}
		}
	}

	// 分隔线
	hr {
		background-color: var(--theme-content-border);
		height: 1px;
		border: none;
		margin: 12px 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
}

// 单选按钮组样式
.mode-radio-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;

	.el-radio {
		margin-right: 0;
	}
}

// 全局样式
:deep(.section-input .el-input__wrapper),
:deep(.section-select .el-select__wrapper) {
	font-size: 12px;
	background-color: var(--theme-input-bg);
	border-color: var(--theme-input-border);
}

:deep(.section-input .el-input__inner),
:deep(.section-select .el-select__input) {
	color: var(--theme-input-text);
}

:deep(.section-input.is-disabled .el-input__wrapper),
:deep(.section-select.is-disabled .el-select__wrapper) {
	background-color: var(--theme-input-disabled-bg);
}
